import { Component, PureComponent } from 'react'

class APP extends Component {
	state = {
		name: '张三',
	}

	updateName = () => {
		setInterval(() => {
			this.setState({
				name: '张三',
			})
		}, 1000)
	}

	componentDidMount() {
		this.updateName()
	}

	render() {
		return (
			<div>
				<ReguarComponent name={this.state.name} />
				<PureComponentDemo name={this.state.name} />
			</div>
		)
	}
}

// 普通组件，更新内容一样也会重新渲染更新
class ReguarComponent extends Component {
	render() {
		console.log('ReguarComponent')
		return <div>{this.props.name}</div>
	}
}

// 纯组件，更新内容一样不会出现渲染更新
class PureComponentDemo extends PureComponent {
	render() {
		console.log('PureComponentDemo')
		return <div>{this.props.name}</div>
	}
}

export default APP
